<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>检查用户名是否可用</title>
    <script src="../js/axios.js"></script>
</head>
<body>
<div>
    <p>
        用户名：<input type="text" id="mingzi"> <button id="checkBtn">检查</button>
    </p>
    <p>
        检查结果：<span id="result">无</span>
    </p>
</div>
</body>
<script>
    //如果该DOM元素有id，可以用document.getElementById或 querySelector
    //若没有id，则建议使用 querySelector
    let username = document.getElementById("mingzi");
    let checkBtn = document.getElementById("checkBtn");
    let result = document.querySelector("#result");
    checkBtn.addEventListener('click',function () {
        // console.log(username.value)
        // let msg = username.value + '是好人！'
        // result.innerHTML = msg
        let name = username.value
        if(name.length>0){
            // alert("正在发生数据")
            axios({
                method:'GET',
                url:'http://101.43.149.52:8080/brand_crud/user',
                params:{
                    method:'checkUsername',
                    username:name
                }
            }).then(function (resp) {

                console.log(resp.data.result)
                // ==  ===
                if(resp.data.result === 'USERNAME_CAN_USE'){
                    //名字能用
                    result.innerHTML = '此名称可以使用！'
                }else{
                    //名字不能用
                    result.innerHTML = '此名称已经存在，不可以使用！'
                }
            })
        }else{
            alert("请输入你的名字")
        }
    })

</script>
</html>